import React, {Component} from 'react';
import {View, StyleSheet, Text, ScrollView, Alert} from 'react-native';
import {Flex, WingBlank, WhiteSpace, Button, List, DatePicker, Provider, Modal, PickerView, Toast} from '@ant-design/react-native';
import {
    VictoryBar,
    VictoryChart,
    VictoryGroup,
    VictoryLabel,
    VictoryLegend,
    VictoryLine,
    VictoryScatter,
    VictoryTheme,
    VictoryZoomContainer,
} from 'victory-native';
import {getCompanyBuildingList} from '~/api/company';
import {getCompanyStatistics} from '~/api/parking';
import Svg from 'react-native-svg';
import moment from 'moment';
export default class Statistical extends React.Component {
    constructor(props) {
        //调用基类的所有的初始化方法
        super(...arguments, props);
        this.onChange = (value) => {
            this.setState({value});
        };
        this.onChange2 = (value2) => {
            this.setState({value2});
        };
        // 设置当前组件的属性
        this.state = {
            interpolation: 'monotoneX',
            value: undefined,
            value2: undefined,
            visible: false,
            buildlist: [],
            buildId: this.props.navigation.getParam('buildid'),
            buildName: this.props.navigation.getParam('buildname'),
            timelist: [
                {value: 1, label: '最近七日'},
                {value: 2, label: '最近半个月'},
                {value: 3, label: '最近一个月'},
                {value: 4, label: '最近半年'},
            ],
            timeid: 1,
            timename: '最近七日',
            Favoritelist: [],
            Orderlist: [],
            Viewlist: [],
            ViewCount: 0,
            FavoriteCount: 0,
            OrderCount: 0,
            ParkingPirce: 0,
        };
        console.disableYellowBox = true;
        let datatime = [];
        datatime = [moment().subtract('days', 6).format('YYYY-MM-DD'), moment().format('yyyy-MM-DD')];
        getCompanyStatistics({
            buildingId: this.state.buildId,
            date_time: datatime,
        }).then((r) => {
            if (r.code === 0) {
                this.setState({
                    ViewCount: r.data.viewCount,
                    FavoriteCount: r.data.favoriteCount,
                    OrderCount: r.data.orderCount,
                    ParkingPirce: r.data.parkingPirce,
                });
                let favolist = [];
                let ordlist = [];
                let vilist = [];
                if (r.data.Favorite.length > 0) {
                    r.data.Favorite.forEach((item, index) => {
                        favolist.push({
                            x: moment(item.RegDate).format('MM-DD'),
                            y: item.FavoriteCount,
                           // label: item.FavoriteCount + '',
                            datatime: moment(item.RegDate).format('yyyy-MM-DD'),
                        });
                    });
                }
                if (r.data.Order.length > 0) {
                    r.data.Order.forEach((item) => {
                        ordlist.push({
                            x: moment(item.OrderDate).format('MM-DD'),
                            y: item.OrderCount,
                          //  label: item.OrderCount + '',
                            datatime: moment(item.OrderDate).format('yyyy-MM-DD'),
                        });
                    });
                }
                if (r.data.View.length > 0) {
                    r.data.View.forEach((item) => {
                        vilist.push({
                            x: moment(item.RegDate).format('MM-DD'),
                            y: item.ViewCount,
                          // label: item.ViewCount + '',
                            datatime: moment(item.RegDate).format('yyyy-MM-DD'),
                        });
                    });
                }
                this.setState({
                    Favoritelist: favolist,
                    Orderlist: ordlist,
                    Viewlist: vilist,
                });
            } else {
                Toast.info(r.msg);
            }
        });
        // this.getbuildlist();
        // this.onChange = (value) => {
        //     let item = this.state.buildlist.find((item) => item.value === value[0]);
        //     this.setState({
        //         buildName: item.label,
        //         buildId: value[0],
        //     });
        // };
        // this.onClose = () => {
        //     this.setState({
        //         visible: false,
        //     });
        // };
        // this.onChange2 = (value) => {
        //     let item = this.state.timelist.find((item) => item.value === value[0]);
        //     this.setState({
        //         timename: item.label,
        //         timeid: value[0],
        //     });
        // };
        // this.onClose2 = () => {
        //     this.setState({
        //         visible2: false,
        //     });
        // };
    }
    getbuildlist() {
        getCompanyBuildingList().then((r) => {
            if (r.code === 0) {
                let list = [];
                r.data.forEach((item) => {
                    list.push({
                        label: item.BuildingName,
                        value: item.CompanyBuildingID,
                    });
                });
                this.setState({
                    buildlist: list,
                });
            } else {
                Alert.alert('111失败');
            }
        });
    }
    SearchStatistical = () => {
        if (this.state.timeid === 0) {
            Toast.info('请选择时间', 1);
        } else {
            let datatime = [];
            if (this.state.timeid === 1) {
                datatime = [moment().subtract('days', 6).format('YYYY-MM-DD'), moment().format('yyyy-MM-DD')];
            } else if (this.state.timeid === 2) {
                datatime = [moment().subtract('days', 14).format('YYYY-MM-DD'), moment().format('yyyy-MM-DD')];
            } else if (this.state.timeid === 3) {
                datatime = [moment().subtract('days', 30).format('YYYY-MM-DD'), moment().format('yyyy-MM-DD')];
            }
            getCompanyStatistics({
                buildingId: this.state.buildId,
                date_time: datatime,
            }).then((r) => {
                if (r.code === 0) {
                    let favolist = [];
                    let ordlist = [];
                    let vilist = [];
                    if (r.data.Favorite.length > 0) {
                        r.data.Favorite.forEach((item, index) => {
                            favolist.push({
                                x: moment(item.RegDate).format('MM-DD'),
                                y: item.FavoriteCount,
                               // label: item.FavoriteCount + '',
                            });
                        });
                    }
                    if (r.data.Order.length > 0) {
                        r.data.Order.forEach((item) => {
                            ordlist.push({
                                x: moment(item.OrderDate).format('MM-DD'),
                                y: item.OrderCount,
                               // label: item.OrderCount + '',
                            });
                        });
                    }
                    if (r.data.View.length > 0) {
                        r.data.View.forEach((item) => {
                            vilist.push({
                                x: moment(item.RegDate).format('MM-DD'),
                                y: item.ViewCount,
                               // label: item.ViewCount + '',
                            });
                        });
                    }
                    this.setState({
                        Favoritelist: favolist,
                        Orderlist: ordlist,
                        Viewlist: vilist,
                    });
                } else {
                    Toast.info(r.msg);
                }
            });
        }
    };
    render() {
        return (
            <ScrollView>
                <Flex
                    justify={'around'}
                    style={{width: '100%', backgroundColor: 'white', height: 40, padding: 10, borderWidth: 1, borderColor: '#d3d3d3'}}>
                    <Text>{this.state.buildName}</Text>
                </Flex>
                <Flex
                    justify={'around'}
                    style={{width: '100%', backgroundColor: 'white', height: 40, padding: 10, borderWidth: 1, borderColor: '#d3d3d3'}}>
                    <Text>总销售量:{this.state.OrderCount}</Text>
                    <Text>总销售金额:{this.state.ParkingPirce}</Text>
                </Flex>
                <Flex
                    justify={'around'}
                    style={{width: '100%', backgroundColor: 'white', height: 40, padding: 10, borderWidth: 1, borderColor: '#d3d3d3'}}>
                    <Text>总收藏量:{this.state.FavoriteCount}</Text>
                    <Text>总浏览量:{this.state.ViewCount}</Text>
                </Flex>
                {/*<Flex>*/}
                {/*    <Text*/}
                {/*        style={{*/}
                {/*            width: '40%',*/}
                {/*            height: 40,*/}
                {/*            backgroundColor: 'white',*/}
                {/*            textAlign: 'center',*/}
                {/*            paddingTop: 10,*/}
                {/*            borderWidth: 1,*/}
                {/*            borderColor: '#d3d3d3',*/}
                {/*        }}*/}
                {/*        onPress={() => {*/}
                {/*            this.setState({visible2: true});*/}
                {/*            if (this.state.timeid === 0) {*/}
                {/*                this.setState({*/}
                {/*                    timeid: this.state.timelist[0].value,*/}
                {/*                    timename: this.state.timelist[0].label,*/}
                {/*                });*/}
                {/*            }*/}
                {/*        }}>*/}
                {/*        {this.state.timename == '' ? '选择时间' : this.state.timename}*/}
                {/*    </Text>*/}
                {/*    <Modal popup visible={this.state.visible2} animationType="slide-up" onClose={this.onClose2}>*/}
                {/*        <View*/}
                {/*            style={{*/}
                {/*                paddingVertical: 20,*/}
                {/*                paddingHorizontal: 20,*/}
                {/*            }}>*/}
                {/*            <PickerView onChange={this.onChange2} value={[this.state.timeid]} data={this.state.timelist} cols={1} />*/}
                {/*        </View>*/}
                {/*        <Button type="primary" onPress={this.onClose2}>*/}
                {/*            确定*/}
                {/*        </Button>*/}
                {/*    </Modal>*/}

                {/*    <Text*/}
                {/*        style={{*/}
                {/*            width: '20%',*/}
                {/*            height: 40,*/}
                {/*            backgroundColor: 'white',*/}
                {/*            textAlign: 'center',*/}
                {/*            paddingTop: 10,*/}
                {/*            borderWidth: 1,*/}
                {/*            borderColor: '#d3d3d3',*/}
                {/*        }}*/}
                {/*        onPress={this.SearchStatistical}>*/}
                {/*        检索*/}
                {/*    </Text>*/}
                {/*</Flex>*/}
                <Svg>
                    <VictoryChart domainPadding={30} theme={VictoryTheme.material}>
                        <VictoryLegend
                            x={300}
                            y={50}
                            padding={{top: 0, left: 0}}
                            title=""
                            orientation="vertical"
                            style={{labels: {fontSize: 12}}}
                            gutter={50}
                            data={[
                                {
                                    name: '浏览量',
                                    symbol: {fill: 'green', type: 'square'},
                                },
                                {
                                    name: '销售量',
                                    symbol: {fill: 'orange', type: 'square'},
                                },
                                {
                                    name: '收藏量',
                                    symbol: {fill: 'red', type: 'square'},
                                },
                            ]}
                            width={400}
                        />
                        <VictoryLabel text={'最近七日销控图'} x={225} y={18} textAnchor="middle" style={{fontSize: 16}} />
                        <VictoryGroup colorScale={'qualitative'}>
                            <VictoryLine
                                interpolation={this.state.interpolation}
                                data={this.state.Viewlist}
                                style={{data: {stroke: 'green', strokeWidth: 2}}}
                            />
                            <VictoryScatter
                                events={[
                                    {
                                        target: 'data',
                                        eventHandlers: {
                                            onPress: () => {
                                                return [
                                                    {
                                                        target: 'labels',
                                                        mutation: (props) => {
                                                            this.props.navigation.push('StatisticalList', {
                                                                buildid: this.state.buildId,
                                                                buildName: this.state.buildName,
                                                                datatime: props.data[props.index].datatime,
                                                                type: 1, //1浏览 2销售 3收藏
                                                            });
                                                        },
                                                    },
                                                ];
                                            },
                                        },
                                    },
                                ]}
                                data={this.state.Viewlist}
                                size={12}
                                style={{data: {fill: 'green'}, labels: {fill: 'white', fontSize: 14}}}
                                labels={({datum}) => datum.y}
                                labelComponent={<VictoryLabel dy={8} />}
                            />
                            <VictoryLine
                                interpolation={this.state.interpolation}
                                data={this.state.Orderlist}
                                style={{data: {stroke: 'orange', strokeWidth: 2}}}
                            />
                            <VictoryScatter
                                events={[
                                    {
                                        target: 'data',
                                        eventHandlers: {
                                            onPress: () => {
                                                return [
                                                    {
                                                        target: 'labels',
                                                        mutation: (props) => {
                                                            this.props.navigation.push('StatisticalList', {
                                                                buildid: this.state.buildId,
                                                                buildName: this.state.buildName,
                                                                datatime: props.data[props.index].datatime,
                                                                type: 2, //1浏览 2销售 3收藏
                                                            });
                                                        },
                                                    },
                                                ];
                                            },
                                        },
                                    },
                                ]}
                                data={this.state.Orderlist}
                                size={12}
                                style={{data: {fill: 'orange'}, labels: {fill: 'white', fontSize: 14}}}
                                labels={({datum}) => datum.y}
                                labelComponent={<VictoryLabel dy={8} />}
                            />
                            <VictoryLine
                                interpolation={this.state.interpolation}
                                data={this.state.Favoritelist}
                                style={{data: {stroke: '#c43a31', strokeWidth: 2}}}
                            />
                            <VictoryScatter
                                events={[
                                    {
                                        target: 'data',
                                        eventHandlers: {
                                            onPress: () => {
                                                return [
                                                    {
                                                        target: 'labels',
                                                        mutation: (props) => {
                                                            this.props.navigation.push('StatisticalList', {
                                                                buildid: this.state.buildId,
                                                                buildName: this.state.buildName,
                                                                datatime: props.data[props.index].datatime,
                                                                type: 3, //1浏览 2销售 3收藏
                                                            });
                                                        },
                                                    },
                                                ];
                                            },
                                        },
                                    },
                                ]}
                                data={this.state.Favoritelist}
                                size={12}
                                style={{data: {fill: '#c43a31'}, labels: {fill: 'white', fontSize: 14}}}
                                labels={({datum}) => datum.y}
                                labelComponent={<VictoryLabel dy={8} />}
                            />
                        </VictoryGroup>
                    </VictoryChart>
                </Svg>
                <WhiteSpace />
                {/*<Text*/}
                {/*    style={{*/}
                {/*        width: '40%',*/}
                {/*        height: 40,*/}
                {/*        backgroundColor: 'white',*/}
                {/*        textAlign: 'center',*/}
                {/*        paddingTop: 10,*/}
                {/*        borderWidth: 1,*/}
                {/*        borderColor: '#d3d3d3',*/}
                {/*    }}*/}
                {/*    onPress={() => {*/}
                {/*        this.setState({visible: true});*/}
                {/*        if (this.state.buildId === 0 && this.state.buildlist.length > 0) {*/}
                {/*            this.setState({*/}
                {/*                buildId: this.state.buildlist[0].value,*/}
                {/*                buildName: this.state.buildlist[0].label,*/}
                {/*            });*/}
                {/*        }*/}
                {/*    }}>*/}
                {/*    {this.state.buildName == '' ? '选择小区' : this.state.buildName}*/}
                {/*</Text>*/}
                {/*<Modal popup visible={this.state.visible} animationType="slide-up" onClose={this.onClose}>*/}
                {/*    <View*/}
                {/*        style={{*/}
                {/*            paddingVertical: 20,*/}
                {/*            paddingHorizontal: 20,*/}
                {/*        }}>*/}
                {/*        <PickerView onChange={this.onChange} value={[this.state.buildId]} data={this.state.buildlist} cols={1} />*/}
                {/*    </View>*/}
                {/*    <Button type="primary" onPress={this.onClose}>*/}
                {/*        确定*/}
                {/*    </Button>*/}
                {/*</Modal>*/}
                <Flex />
            </ScrollView>
        );
    }
}
const styles = StyleSheet.create({});
